<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>创建家族</title>

	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/aui.css"/> -->
	<style>
		.add_avatar {
			margin: 0 auto;
			width: 50%;
			border-radius: 10px;
		}
	</style>
</head>

<body style="height:100%;background-color:#fff">
	<div id="app">
		<div class="header">
			<div v-back.tapmode class="back"></div>
			<span class="title">创建家族</span>
			<span class='fnSave' style="position:absolute;right:10px;font-size:14px;" v-myclick="[1, fnSave]"
				v-show="showfn==1">确定</span>
		</div>
		<div class="top-container" v-cloak style="padding-top:60px;text-align:center">
			<div style="padding-top:50px;width: 50%;margin: 0 auto;" v-myclick="setPortrait">
				<img class="add_avatar" :src="group_avatar ? group_avatar : '../../image/add_group.png'">
			</div>
			<div style="margin:0 auto;width:80%;margin-top:20px;font-size:12px">
				<input v-model="group_name"	placeholder="请输入群昵称" style="padding:10px;outline:none;background:#F7F4F2;text-align:center">
			</div>
			<a class="btn-commit" style="background:#33375E" v-myclick="create" v-show="init_group">创建</a>
			<a class="btn-commit" style="background:#ccc" v-show="!init_group">创建</a>
		</div>
	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/swiper.js"></script>
<script>

	var user;
	var vm;
	apiready = function () {
		setBSImg();
		FNImageClip = api.require('FNImageClip');
		MNActionButton = api.require('PIActionButton');
		initApp();
		addListeners();
	};

	function initApp() {
		vm = new Vue({
			el: '#app',
			data: {
				imgPath: '../../image/',
				group_avatar: '',
				group_name: '',
				showfn: 0,
				init_group: false,
				BSImg: {
					big: Vue.BSImg == 'big',
					small: Vue.BSImg == 'small'
				},
			},
			computed: {
			},
			methods: {
				create: function () {
					if (this.group_name.length < 1 || this.group_name.length > 16) {
						api.toast({
							msg: '群名称长度为1-16个字符',
							duration: 3000,
							location: 'bottom'
						});
						return
					}
					if (this.group_name.length <= 1) {
						api.toast({
							msg: '选择群头像',
							duration: 3000,
							location: 'bottom'
						});
						return
					}
					var data = {
						member_id: getPrefs('member_id'),
						name: this.group_name,
						portrait: this.group_avatar
					};
					var callback = function (ret) {
						group_id = ret.content;
						api.toast({
							msg: '群组创建成功',
						});
						// return true;
						var params = { to: 1 };
						closeWin('index');
						openWin('../../index', params, { slidBackEnabled: false, reload: true });
					};
					pinet.post(URL.createGroup, data, callback);
				},
				setPortrait: function () {
					document.activeElement.blur();
					api.actionSheet({
						cancelTitle: '取消',
						buttons: ['拍照', '从手机相册选择'],
						style: {
							fontNormalColor: '#000',
							fontPressColor: '#000',
						}
					}, function (ret, err) {
						var index = ret.buttonIndex;
						switch (index) {
							case 1:
								return vm.getPicture('camera');
							case 2:
								return vm.getPicture('album');
							default:
								break;
						}
					});
				},
				getPicture: function (sourceType) {
					api.getPicture({
						sourceType: sourceType,
						targetWidth: 600,
						encodingType: 'jpg'
					}, function (ret) {
						if (ret) {
							vm.showfn = 1;
							FNImageClip.open({
								rect: {
									x: 0,
									y: 60,
									w: api.winWidth,
									h: api.winHeight - 60
								},
								srcPath: ret.data,
								style: {
									mask: '',
									clip: {
										w: api.winWidth,
										h: api.winWidth,
										x: 0,
										y: 80,
										borderColor: '#FFFFFF',
										borderWidth: 1,
										appearance: 'rectangle'
									}
								},
								mode: 'image'
							});
						}
					});
				},
				fnSave: function () {
					var savename = new Date().getTime() + '.png';
					FNImageClip.save({
						destPath: 'fs://image/temp' + savename,
						copyToAlbum: false,
						quality: 1
					}, function (ret, err) {
						if (ret) {

							var obj = api.require('qiniuUpfile');
							// var baseUrl = 'http://rgsqn.tiaocheng-tech.com/'; //七牛给你的测试域名，也可使用自己捆绑的域名youe.xxx.com
							obj.upfile({
								file: ret.destPath,
								name: savename
							}, function (ret, err) {
								if (ret.status) {
									if (ret.oper == "complete") {
										//上传成功后组装访问路径，或直接访问文档
										vm.group_avatar = qiniuhost + ret.info.key;
										// sendFileMessage(baseUrl + ret.info.key,name,size,file_class);
										// $api.text(b, baseUrl + ret.info.key);
									} else if (ret.oper == "progress") {
										// $api.css($api.dom("."+file_class), 'width:'+ret.percent+'%');
									}
								}
							});
							vm.showfn = 0;
							FNImageClip.close();
						} else {
							alert('裁剪失败，请重试');
						}
					});
				},
			},
			watch: {
				group_name:function(name){
					if( /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig.test(name)){
						vm.init_group = false;
						api.alert({
							title: '提示',
							msg: '群昵称中不能包含表情等特殊符号',
							buttons: ['确定']
						}, function (ret, err) {});
						return
					}
					vm.init_group = true;
				}
			}
		});
	}

	function addListeners() {
		api.addEventListener({
			name: 'viewappear'
		}, function () {
			onPageStart();
		});

		api.addEventListener({
			name: 'viewdisappear'
		}, function () {
			onPageEnd();
		});

		api.addEventListener({
			name: 'keyback'
		}, function () {
			onPageEnd();
			api.closeWin();
		});
	}


</script>

</html>
